import React, { useState, useRef, useEffect } from 'react';
import "../../../api/Data"
import request from '../../../api/request'
import { PullRefresh, List, Tabs, Cell, Image } from 'react-vant';
import type { ListInstance } from 'react-vant';
import { useDispatch, useSelector } from "react-redux"
import { useNavigate } from 'react-router';
interface ARRTYPE {
  id: string,
  img: string,
  title: string,
  price: number,
  count: number,

}
function My() {
  const listRef = useRef<ListInstance>(null);
  const [arrs, serArrs] = useState<Array<ARRTYPE>>([])
  const [newarrs, serNewarrs] = useState<Array<ARRTYPE>>([])
  const [pagenum, setPagenum] = useState(1)
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const [isLoad, setIsload] = useState(false)
  const [finished, setFinished] = useState<boolean>(false);
  useEffect(() => {
    // 刚进页面请求数据
    request.get("/api/alldata").then(res => {
      // 设置原始数据
      serArrs(res.data.alldata)
      // 默认进入页面显示数据条数
      let arrm = res.data.alldata.slice(0, pagenum * 15)
      // 设置新数组
      serNewarrs(arrm)
    })
  }, [])
  console.log(arrs);
  // 上拉加载
  const onLoadRefresh = async () => {
    setIsload(true);
    setTimeout(()=>{
       setPagenum(pagenum+1)
       let arrm = arrs.slice(0, pagenum *15)
       serNewarrs(arrm)
       if(newarrs.length>=80){
          setFinished(true);
       }
       //执行完毕将锁定状态解除
      setIsload(false)
    },2000)

  };
  // 下拉刷新
  const onRefresh = async () => {
    setFinished(false);
    setPagenum(1);
  };
  return (
    <div>
      <PullRefresh successText="刷新成功" onRefresh={onRefresh}>
        <List loading={isLoad} ref={listRef} finished={finished} onLoad={onLoadRefresh}>
          {
            newarrs.map((item, index) => {
              return <Cell key={index}
                center
                title={item.title}
                label={item.price}
                icon={
                  <Image
                    width={44}
                    height={44}
                    src={item.img}
                    round
                  />
                }
                isLink
              />
            })
          }
        </List>


      </PullRefresh>
    </div>
  )
}

export default My